<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>新主页</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit"/>

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="./assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes"/>
    <link rel="icon" sizes="192x192" href="./assets/i/app-icon72x72@2x.png"/>

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="./assets/i/app-icon72x72@2x.png"/>

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="./assets/i/app-icon72x72@2x.png"/>
    <meta name="msapplication-TileColor" content="#0e90d2"/>

    <link rel="stylesheet" href="./assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="./assets/css/app.css"/>
    <script src="./js/vue.js"></script>

    <!--    弹框    -->
    <link rel="stylesheet" type="text/css" href="./swal/sweetalert2.min.css">
    <script src="./swal/sweetalert2.min.js"></script>
    <!-- for IE support -->
    <script src="./swal/promise.min.js"></script>

</head>
<style>
    body {
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
        background: #f7f7f7;
    }

    .lhl-background {
        background: url(img/background.jpg) no-repeat top center;
        background-color: #c0e4da;
        min-height: 1200px;
    }

    .lhl-div-padding {
        padding: 15px;
    }

    .lhl-div-margin {
        margin: 10px;
    }

    .lhl-div-card {
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
        padding-top: 60px;
        font-size: 15px;
    }

    .lhl-div-background-urlset {
        background-repeat: no-repeat no-repeat;
        background-size: 100% auto;
        background-position: center;
    }

    .lhl-text-mini {
        font-size: 15px;
        color: #919191;
    }

    .lhl-border-right {
        border-right: 1px solid #ddd;
    }

    .lhl-margin-top {
        margin-top: 10px;
    }

    .lhl-div-inline {
        display: inline;
    }

    .lhl-fixed {
        position: fixed;
    }

    .lhl-text-shadow {
        text-shadow: black 0.1em 0.1em 0.2em;
    }

    .usermsb-box {
        overflow: hidden;
        float: right;
        margin-right: 100px;
        margin-bottom: 100px;
        width: 300px;
        height: 300px;
        background: white;
        border: 1px solid #eee;
        border-radius: 5px;
    }

    .usermsb-box .user-wraper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .usermsb-box .user-wraper .user-img {
        position: absolute;
        top: 30px;
        left: 50%;
        margin-left: -45px;
        width: 90px;
        height: 90px;
        border-radius: 100%;
        overflow: hidden;
    }

    .usermsb-box .user-wraper .user-img img {
        width: 100%;
        height: 100%;
    }

    .usermsb-box .user-wraper .user-msg {
        width: 100%;
        height: 100px;
        position: absolute;
        top: 140px;
        background: #fff;
        text-align: center;
    }

    .usermsb-box .user-wraper .user-msg h3 {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        margin: 0 5px;
        padding: 7px;
    }

    .usermsb-box .user-wraper .user-msg h3 span {
        margin-left: 5px;
        padding-bottom: 15px;
        font-size: 13px;
        line-height: 30px;
        color: #666;
    }

    .usermsb-box .user-wraper .user-msg span {
        margin-top: 15px;
        font-size: 13px;
        color: #999;
    }

    .usermsb-box .user-wraper .user-btn {
        position: absolute;
        left: 50%;
        bottom: 40px;
        margin-left: -75px;
        width: 150px;
        height: 35px;
    }

    .usermsb-box .user-wraper .user-btn .btn {
        width: 100%;
        height: 100%;
        background: #0984e3;
        border: none;
        outline: none;
        color: white;
        font-weight: bold;
        font-size: 14px;
        border-radius: 5px;
    }

    .usermsb-box .user-wraper .user-btn .btn:active {
        background: #74b9ff;
    }

    .content-wraper {
        position: relative;
        top: -10px;
        left: 50%;
        margin-top: 60px;
        margin-left: -500px;
        width: 800px;
        overflow: hidden;
    }

    .content-wraper .content-item {
        border: 1px solid #eee;
        margin: 20px;
        border-radius: 5px;
    }

    .content-wraper .content-item .item-head .head-img {
        margin: 5px 15px;
    }

    .content-wraper .content-item .item-head .head-msg {
        display: inline-block;
        float: left;
        height: 50px;
        margin-top: 12px;
    }

    .content-wraper .content-item .item-head .head-msg .msg-name {
        font-size: 15px;
    }

    .content-wraper .content-item .item-head .head-msg .msg-data {
        font-size: 13px;
        color: #666;
    }

    .content-wraper .content-item .content-text {
        margin: 10px 20px;
        min-height: 10px;
        padding: 10px 0;
    }

    .content-wraper .content-item .content-img {
        margin-left: 20px;
        margin-top: -20px;
    }

    .content-wraper .content-item .content-img img {
        width: 120px;
        height: 110px;
        margin-right: 10px;
    }

    .content-wraper .content-item .content-list {
        width: 100%;
    }

    .content-wraper .content-item .content-list .list-item {
        cursor: pointer;
        display: flex;
        justify-content: center;
        width: 50%;
        height: 40px;
        margin-top: 10px;
        transition: all .3s ease;
        overflow: hidden;
    }

    .content-wraper .content-item .content-list .list-item:hover {
        background: #ecf0f1;
    }

    .content-wraper .content-item .content-list .list-item a {
        line-height: 40px;
        text-align: center;
    }

    .content-wraper .content-item .content-pl {
        width: 100%;
    }

    .content-wraper .content-item .content-pl .pl-load {
        cursor: pointer;
        line-height: 20px;
        margin: -7px 0 10px 10px;
    }

    .content-wraper .content-item .content-pl .pl-inner {
        margin: 5px 30px;
    }

    .am-slides li img {
        /*height: 500px;*/
    }

    .card-fff {
        background: #fff;
    }

    .card-border-no {
        border: none;
    }

    .card-border-eee {
        border-color: #eee;
    }

    .card-images {
        width: 110px;
        height: 110px;
        background-repeat: no-repeat;
        background-position: center center;

    }
    .am-sticky{
        z-index:99;
    }
</style>

<body>
<div id="app">
    <header class="am-topbar am-topbar-inverse am-topbar-fixed-top" style="padding-left: 40px;padding-right: 40px;">
        <h1 class="am-topbar-brand">
            <p>Tweets</p>
        </h1>
        <div>
            <div class="am-topbar-right">
                <a href="./userlogin" class="am-btn am-btn-primary am-topbar-btn am-btn-sm am-round">
                    <i class="am-icon-refresh"></i> 切换账户
                </a>
                <a href="./userinfo" class="am-btn am-topbar-btn am-btn-primary am-btn-sm am-round">
                    <i class="am-icon-cloud"></i> 个人信息
                </a>
            </div>
        </div>
    </header>
    <div class="am-g">
        <div class="am-u-lg-10 am-u-lg-offset-1">
            <div class="am-u-lg-12" style="margin-top: 10px;margin-bottom: 10px;">
                <div data-am-widget="slider" class="am-slider am-slider-d3" data-am-slider='{&quot;controlNav&quot;:&quot;thumbnails&quot;,&quot;directionNav&quot;:false}' >
                    <ul class="am-slides">
                        <li v-bind:data-thumb="headList[0].img">
                            <img v-bind:src="headList[0].img">

                            <div class="am-slider-desc am-text-lg" >
                                <h2 class="am-slider-title">美图鉴赏</h2>
                                <p>{{headList[0].text}}</p>
                            </div>

                        </li>
                        <li v-bind:data-thumb="headList[1].img">
                            <img v-bind:src="headList[1].img">
                            <div class="am-slider-desc am-text-lg">
                                <h2 class="am-slider-title">美图鉴赏</h2>
                                <p>{{headList[1].text}}</p>
                            </div>

                        </li>
                        <li v-bind:data-thumb="headList[2].img">
                            <img v-bind:src="headList[2].img">
                            <div class="am-slider-desc am-text-lg">
                                <h2 class="am-slider-title">美图鉴赏</h2>
                                <p>{{headList[2].text}}</p>
                            </div>

                        </li>
                        <li v-bind:data-thumb="headList[3].img">
                            <img v-bind:src="headList[3].img">
                            <div class="am-slider-desc am-text-lg">
                                <h2 class="am-slider-title">美图鉴赏</h2>
                                <p>{{headList[3].text}}</p>
                            </div>

                        </li>
                    </ul>
                </div>
            </div>
            <div class="am-u-lg-9">
                <!--    这里开始是推文部分-->
                <table class="am-table am-table-bordered am-table-radius card-fff card-border-eee">
                    <tr>
                        <td class="am-text-default" style="padding-top:10px;padding-bottom: 10px;">
                            <strong>导语：</strong>快来Tweet发掘新世界吧！
                        </td>
                    </tr>
                </table>

                <table class="am-table am-table-bordered am-table-radius card-fff card-border-eee"
                       v-for="(item,key) in Tweet">
                    <tr>
                        <td class="am-text-danger">
                            <i class="am-icon-fire"></i>
                            热门推文
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="am-cf">
                                <img class="am-fl" height="50px" width="50px" v-bind:src="item.user_head"/>
                                <div class="am-fl" style="margin-left: 10px;">
                                    <div class="am-text-default" style="" v-bind:alt="item.userid">
                                        <strong>{{item.user_name}}</strong> <br>
                                        {{item.createdate}}
                                    </div>
                                </div>
                                <div style="margin-left: 60px; margin-top: 50px;">
                                    <div class="am-text-default" style="margin-top: 5px;">
                                        {{item.text}}
                                    </div>
                                    <div style="margin-top: 10px;">
                                        <img class="card-images" v-if="item.image1!=undefined"
                                             v-bind:style="{backgroundImage:'url('+item.image1+')'}"
                                             @click="BigImgClick(item.image1)"
                                             data-am-modal="{target: '#my-modal-bigimg', closeViaDimmer: 0, width: 620}"/>
                                        <img class="card-images" v-if="item.image2!=undefined"
                                             v-bind:style="{backgroundImage:'url('+item.image2+')'}"
                                             @click="BigImgClick(item.image2)"
                                             data-am-modal="{target: '#my-modal-bigimg', closeViaDimmer: 0, width: 620}"/>
                                        <img class="card-images" v-if="item.image3!=undefined"
                                             v-bind:style="{backgroundImage:'url('+item.image3+')'}"
                                             @click="BigImgClick(item.image3)"
                                             data-am-modal="{target: '#my-modal-bigimg', closeViaDimmer: 0, width: 620}"/>
                                    </div>
                                </div>
                                <div class="am-text-default" style="margin-top: 10px;">
                                    <div class="am-u-lg-4 am-text-center">
                                        <a @click="CreatePraise(item.id,key)">
                                            <i class="am-icon-thumbs-up"></i>&nbsp;{{item.up}}
                                        </a>
                                    </div>
                                    <div class="am-u-lg-4 am-text-center">
                                        <a @click="CreateReply(item.id,key)">
                                            <i class="am-icon-comment"></i> 添加评论
                                        </a>
                                    </div>
                                    <div class="am-u-lg-4 am-text-center">
                                        <a @click="Loadreply(item.id,key)">
                                            <i class="am-icon-unsorted"></i> 展开评论
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div class="am-text-xs pl-inner" v-for="itemr in item.Reply">
                                <span class="am-text-default">
                                    <strong>{{itemr.username}}: </strong>
                                </span>
                                <span class="am-text-default">{{itemr.text}}&nbsp;({{itemr.createdate}})</span>
                            </div>
                        </td>
                    </tr>
                </table>
                <!--                继续加载-->
                <button class="am-btn am-btn-block am-btn-default" @click="ContinueLoadTweet">继续加载Tweet
                </button>
                <button data-am-smooth-scroll class="am-btn am-btn-block am-btn-warning">
                    <i class="am-icon-upload"></i>
                    回到顶部
                </button>
            </div>
            <div class="am-u-lg-3">
                <!--    这里是个人信息部分-->
                <div data-am-sticky="{top:60}">
                    <table class="am-table am-table-bordered am-table-radius card-fff card-border-eee">
                        <tr>
                            <td>个人信息</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="am-cf">
                                    <img class="am-fl" height="50px" width="50px" v-bind:src="UserInfo.UserHead"/>
                                    <div class="am-fl" style="margin-left: 10px;">
                                        <div class="am-text-default" style="font-weight: bold;">{{UserInfo.UserName}}
                                        </div>
                                        <div class="am-text-truncate" style="width: 200px;">{{UserInfo.Simple}}</div>
                                    </div>
                                </div>
                                <div style="margin-left: 60px;">
                                    <span class="am-badge am-badge-primary am-round am-text-sm">获赞 {{UserInfo.PraiseNumber}}</span>
                                    <span class="am-badge am-badge-success am-round am-text-sm">推文 {{UserInfo.TweetNumber}}</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table class="am-table am-table-bordered am-table-radius card-fff card-border-eee">
                        <tr>
                            <td>推文Push</td>
                        </tr>
                        <tr>
                            <td>

                                <div class="am-u-lg-12" align="center">
                                    <button class="am-btn am-btn-primary"
                                            style="margin-top: 10px;margin-bottom: 10px;min-width: 200px;"
                                            data-am-modal="{target: '#modal-sendtweet', closeViaDimmer: 0, width: 400, height: 300}">
                                        发推文
                                    </button>
                                </div>
                                <div class="am-text-sm">
                                    <strong>提示:</strong> 发送文章一定要遵守相关法律，最终解释权归本站所有。
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table class="am-table am-table-bordered am-table-radius card-fff card-border-eee">
                        <tr>
                            <td>
                                Tweet快讯
                                <ul class="am-list" style="margin-top: 5px;">
                                    <li v-for="(fitem,fkey) in editorList">
                                        <a v-bind:href="'./admin/achtml/'+fitem.fileurl" >{{fitem.title}} <span class="am-badge am-badge-warning am-radius" v-if="fkey==0">new</span></a>
                                    </li>
                                </ul>
                            </td>

                        </tr>
                    </table>
                </div>

            </div>
        </div>
        <!-- =模态框 -->
        <!-- 发推文框 -->
        <div class="am-modal am-modal-no-btn" id="modal-sendtweet">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">
                    发Tweet
                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                </div>
                <div class="am-modal-bd">
                    <div class="am-form-group-sm" style="text-align: left;">
                        <label>推文内容</label>
                        <textarea style="width: 100%;" v-model="TweetText"></textarea>
                        <span>选择图片</span>
                        <div class="lhl-div-margin">
                            <img v-bind:src="Inimg.img1" width="40px" height="40px"
                                 onclick="document.getElementById('up-image1').click()"/>
                            <img v-bind:src="Inimg.img2" width="40px" height="40px"
                                 onclick="document.getElementById('up-image2').click()"/>
                            <img v-bind:src="Inimg.img3" width="40px" height="40px"
                                 onclick="document.getElementById('up-image3').click()"/>
                            <input id="up-image1" type="file" accept="image/jpg,image/jpeg,image/png"
                                   style="display:none;"
                                   @change="ReadImage($event,1)"/>
                            <input id="up-image2" type="file" accept="image/jpg,image/jpeg,image/png"
                                   style="display:none;"
                                   @change="ReadImage($event,2)"/>
                            <input id="up-image3" type="file" accept="image/jpg,image/jpeg,image/png"
                                   style="display:none;"
                                   @change="ReadImage($event,3)"/>
                        </div>
                        <button class="am-btn am-btn-block am-btn-primary " @click="SendTweet">发送Tweet</button>
                    </div>

                </div>
            </div>
        </div>

        <!-- 加载框 -->
        <div class="am-modal am-modal-loading am-modal-no-btn" id="my-modal-loading">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">加载中...</div>
                <div class="am-modal-bd">
                    <span class="am-icon-spinner am-icon-spin"></span>
                </div>
            </div>
        </div>

        <!-- 大图框 -->
        <div class="am-modal am-modal-no-btn " id="my-modal-bigimg">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">
                    查看大图
                    <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                </div>
                <div class="am-modal-bd">
                    <img v-bind:src="BigImg" width="600px"/>
                </div>
            </div>
        </div>
        <!-- alert框 -->
        <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">
                    提示
                </div>
                <div class="am-modal-bd">
                    {{AlertText}}
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn">确定</span>
                </div>
            </div>
        </div>

        <div class="lhl-fixed" style="right: 10px;bottom: 10px;">
            <i class="am-icon-arrow-up am-icon-btn" data-am-smooth-scroll></i>
        </div>


    </div>
</div>
</body>
<script src="./js/jquery2.js"></script>
<script src="./assets/js/amazeui.min.js"></script>
<script src="./js/index_js.js"></script>

</html>